<template>
    <div class="detail-container">
        <!--滚动区域-->
        <div id="mainScroll">
            <!--内容详情-->
            <div class="detail-content hairline-bottom" v-if="isShowContent">
                <!--<div class="img-box">
                        <img class="detail-img" src="../img/test.png" alt="">
                    </div>
                    <div class="img-box-t">
                        <img class="detail-img" src="../img/test.png" alt="">
                    </div>-->
                 <div class="content" v-html="detailData.content"></div>

                <div class="img-box" v-for="(item, index) in detailData.photos">
                    <img class="detail-img" :src="item.fileUrl  | thumbnail('_750_2048_100_0')" alt="">
                </div>
                <div class="sub-info-box">
                    <span class="time" v-text="detailData.createDate"></span>
                    <div class="sub-info">
                        <span class="vote-box" @click="praise" :class="{'active': detailData.praised}">
                            <i class="vote-icon"></i>
                            <i class="vote-num" >{{ detailData.praiseCount | changeVote}}</i>
                        </span>
                        <span>
                            <i class="discuzz"></i>
                            <i class="discuzz-num" >{{ detailData.commentCount | changeDis}}</i>
                        </span>
                    </div>
                </div>
            </div>
            <!--评论列表-->
            <div class="comment-list-box" :class="{'hairline-tb': commentList.length}">
                <div class="comment-list-item" v-for="(item, index) in commentList">
                    <div class="avator-container">
                      <div class="avator-box"    >
                        <i :style="'background-image:url('+item.commentAvator+')'"></i>
                      </div>
                    </div>
                    <div class="comment-container" :class="{'hairline-bottom': index < commentList.length - 1}">
                        <div class="comment-title">
                            <span class="comment-user" v-text="item.commentName"></span>
                            <span class="comment-time" ><span>{{item.commentTime | changeTimeYMD }}</span></span>
                        </div>
                        <div class="comment-content" v-text="item.commentContent"></div>
                    </div>
                </div>
            </div>

            <div id="more" data-gap="100"></div>
        </div>
        <!--fixed 输入框-->
        <div class="submit-box hairline-top" :class="{'alert': alert}">
            <!--<input type="text" class="submit-input"  maxlength="100"  placeholder="说点什么" v-model="content">-->
            <textarea class="submit-text" :class="{'alert': alert}" placeholder="说点什么" v-model="content" maxlength="140" @focus="textFoucs(true)" @blur="textFoucs(false)" ></textarea>
            <div class="submit-btn" @click="addComment">发布</div>
        </div>
    </div>
</template>

<script>
import detail from './index';
export default detail;
</script>



<style scoped>
/** 详情 **/
#mainScroll {
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    bottom: 67px;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
}
.detail-content {
    padding: 9px 15px 0;
    background: #fff;
}

.img-box,
.img-box-t {
    /*height: 194px;*/
    line-height: 0;
}

.img-box {
    margin-bottom: 10px;
        width: 100%;
}

.img-box-t {
}

.detail-img {
    height: 100%;
}

.content {
  margin-bottom: 7px;
  font-size: 15px;
  color: #000000;
  line-height: 27px;
}
.sub-info-box {
    line-height: 18px;
    margin-top: 9px;
    padding-bottom: 13px;
    overflow: hidden;
}

.time {
    float: left;
    font-size: 14px;
    color: #8E8E93;
}

.sub-info {
    float: right;
    /*font-size: 0;*/
}

.vote-box .vote-icon {
    background: url('../img/novote.png') no-repeat center;
    background-size: cover;
    display: inline-block;
    width: 17px;
    height: 17px;
    vertical-align: middle;
    margin-right: 5px;
    margin-top: -2px;
}

.vote-box.active .vote-icon {
    background: url('../img/vote.png') no-repeat center;
    background-size: cover;
}

.vote-box .vote-num {
    font-size: 14px;
    color: #868686;
    margin-right: 35px;
    vertical-align: middle;
}

.vote-box.active .vote-num {
    color: #DF3031;
}

.discuzz {
    background: url('../img/discuzz.png') no-repeat center;
    background-size: cover;
    display: inline-block;
    width: 17px;
    height: 17px;
    vertical-align: middle;
    margin-right: 5px;
}

.discuzz-num {
    font-size: 14px;
    color: #868686;
    vertical-align: middle;
}


/** 评论列表 **/

.comment-list-box {
    margin-top: 11px;
    padding: 0 15px;
    background: #fff;
}

.comment-list-item {
    padding-top: 15px;
    overflow: hidden;
}

.avator-container {
    width: 32px;
    float: left;
    min-height: 1px;
}


.avator-box {
  font-size: 0;
  border-radius: 50%;
  background: #eee;
  overflow: hidden;
  background-position: center;background-size:80% ;
  background-repeat: no-repeat;
  background-image:url(../img/default-headimage.png) ;
}
.avator-box i{
  display: inline-block;
  width: 32px;
  height: 32px;
  background-position: center;background-size: 100% ;
}

.comment-container {
    width: 303px;
    margin-left: 10px;
    float: left;
    padding-bottom: 10px;
}

.comment-title {
    font-size: 15px;
    color: #222222;
    letter-spacing: 0;
    overflow: hidden;
    line-height: 15px;
    height: 15px;
}

.comment-user {}

.comment-time {
    float: right;
    font-size: 13px;
    color: #999999;
}

.comment-content {
    margin-top: 8px;
    font-size: 15px;
    color: #222222;
    line-height: 24px;
}

.submit-box {
    height: 56px;
    margin-top: 11px;
    position: relative;
    background: #F9F9F9;
    position: fixed;
    width: 100%;
    left: 0;
    bottom: 0;
    box-shadow: 0 -1px 2px 0 #DDDEE3;
    padding: 17px 17px;
}
.submit-box.alert {
    padding: 6px 6px;
}
.submit-input {
    margin-top: 13px;
    height: 32px;
    padding-left: 15px;
}
.submit-text {
    font-family: STHeitiSC-Light;
    height: 22px;
    font-size: 17px;
    line-height: 22px;
    overflow: auto;
    resize: none;
    box-sizing: border-box;
}

.submit-text.alert {
    height: 44px;
}

.submit-btn {
    background: #DF3031;
    font-size: 15px;
    color: #FFFFFF;
    border-radius: 2px;
    width: 60px;
    height: 32px;
    line-height: 32px;
    position: absolute;
    right: 12px;
    top: 13px;
    text-align: center;
}
</style>


